<script setup lang="ts">
import { onUnmounted } from 'vue';
import { useRouter } from 'vue-router';
import { captchaPost } from '@/services/login.ts';

const $router = useRouter();
const formRef = ref();
const loading = ref(false);
const countDown = ref(0); // 倒计时秒数
const timer = ref<number>(); // 定时器
const postData = reactive({
  loginPhone: '',
  captcha: '',
});

const rules = reactive({
  loginPhone: [
    { required: true, message: '请输入登录手机号' },
    {
      pattern: /^1[3-9]\d{9}$/,
      message: '请输入正确的手机号',
    },
  ],
  captcha: [{ required: true, message: '验证码不能为空' }],
});

const sendCaptcha = async () => {
  const reg = /^1[3-9]\d{9}$/;
  if (!reg.test(postData.loginPhone)) {
    showToast('请输入正确的手机号码');
    return;
  }
  // 防止重复发送
  if (countDown.value > 0) return;
  let params = { mobile: postData.loginPhone, smsType: 'CHANGE_PASSWORD' };
  let { err } = await captchaPost(params);
  if (err) {
    showToast(err);
  } else {
    showToast('发送成功');
    // 开始倒计时（60秒）
    countDown.value = 60;
    timer.value = window.setInterval(() => {
      countDown.value--;
      if (countDown.value <= 0) {
        clearInterval(timer.value);
        timer.value = undefined; // 清除定时器后重置为undefined
      }
    }, 1000);
  }
};

const onNextClick = async () => {
  try {
    // await formRef.value.validate();
    // loading.value = false;
    $router.push({
      path: '/changePassword',
      query: { captcha: postData.captcha, loginPhone: postData.loginPhone },
    });
  } catch (errors) {
    console.log('表单验证失败', errors);
  }
};

onUnmounted(() => {
  if (timer.value) {
    clearInterval(timer.value);
  }
});
</script>

<template>
  <div class="find-container">
    <van-form :model="postData" :rules="rules" ref="formRef">
      <div class="vant-input">
        <van-field
          v-model="postData.loginPhone"
          :rules="rules.loginPhone"
          name="loginPhone"
          placeholder="请输入手机号"
          clearable
        />
      </div>

      <div class="vant-input">
        <van-field
          v-model="postData.captcha"
          :rules="rules.captcha"
          center
          clearable
          placeholder="请输入短信验证码"
        >
          <template #button>
            <div class="svgIcon">
              <van-button
                @click="sendCaptcha"
                :disabled="countDown > 0"
                size="small"
                type="primary"
              >
                {{ countDown > 0 ? `${countDown} 秒后重试` : '获取验证码' }}
              </van-button>
            </div>
          </template>
        </van-field>
      </div>

      <van-button
        :loading="loading"
        color="#E89000"
        type="primary"
        @click="onNextClick"
        round
        block
      >
        下一步
      </van-button>
    </van-form>
  </div>
</template>

<style lang="scss" scoped>
.find-container {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding: 16px;
  background: #fff;

  .vant-input {
    margin-top: 16px;
    width: 100%;
    background: #f6f6f6;

    .van-cell {
      background: #f6f6f6;
    }
  }

  .svgIcon {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 24px;
  }

  .van-button {
    margin: 28px 0;
  }
}
</style>
